# Tree Shaking

Tree Shaking 翻译过来的意思就是“摇树”。伴随着摇树的动作，树上的枯树枝和树叶就会掉落下来。

我们这里要介绍的 Tree-shaking 也是同样的道理，不过通过 Tree-shaking “摇掉”的是代码中那些没有用到的部分，这部分没有用的代码更专业的说法应该叫作未引用代码（dead-code）。

Tree-shaking 最早是 Rollup 工具中推出的一个特性，Webpack 从 2.0 过后开始支持这个特性。

我们使用 Webpack 生产模式打包过程中，就会自动开启这个功能，以此来检测我们代码中的未引用代码，然后自动移除它们，从而达到对打包结果的优化。

我们可以先来体验一下这个功能的效果，这里我的源代码非常简单，只有两个文件。

└─ 09-tree-shaking
   ├── src
   │   ├── components.js
   │   └── main.js
   ├── package.json
   └── webpack.config.js

其中 components.js 中导出了一些函数，这些函数各自模拟了一个组件，具体代码如下：

// ./src/components.js
export const Button = () => {
  return document.createElement('button')
  console.log('dead-code')
}
export const Link = () => {
  return document.createElement('a')
}
export const Heading = level => {
  return document.createElement('h' + level)
}

其中 Button 组件函数中，在 return 过后还有一个 console.log() 语句，很明显这句代码永远都不会被执行，所以这个 console.log() 就属于未引用代码。

此外，在 main.js 文件中只是导入了 compnents.js，具体代码如下：

// ./src/main.js
import { Button } from './components'
document.body.appendChild(Button())